<template>
<div :class="{'xi-img':1,on:props.borderRadius !== false}"><div class="bg"></div><image v-if="props.src" :mode="props.mode" class="image" :src="props.src" :show-menu-by-longpress="true"/></div>
</template>

<script setup>
let props = defineProps({
	src:{
		default:()=>''
	},
	mode:{
		default:()=>'aspectFill'
	},
	borderRadius:{
		default:()=>false
	}
})
</script>

<style lang="scss" scoped>
.xi-img{
	position: relative;
	&.on{
		overflow: hidden;
		border-radius: 100%;
	}
	.bg{
		padding-top:100%;
	}
	.image{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
</style>